Promise プロミス

https://mdn.mozillademos.org/files/15911/promises.png

Promise

ネスト地獄を避けて非同期処理ができる

code:promise.js

const promise = new Promise((resolve, reject) => resolve('解決した'))

const unResolvedPromise = new Promise((resolve, reject) => reject('エラー発生'))

promise

.then((value) => value) // 解決した

unResolvedPromise

.then((value) => value)

.catch((errorMessage) => new Error(errorMessage)) // error: エラー発生

.then((value) => value) // エラー発生

then&catch

then

Promise#(onFulfilled,onRejected)

返り値: promise

onFulfilled 成功ハンドラ onRejected 失敗ハンドラ をPromiseに付与

onFullfilled(value)

value: promiseにラップされた値etc

onRejected(reason)

reason: rejectedとなった理由など

catch

Promise#catch(onRejected)

then(undefined, omRejected)のショートカット

返り値: promise

静的メソッド

Promise.resolve

↓のエイリアス

code:promise.js

new Promise((resolve) => resolve(/* value */))

Promise.reject

↓のエイリアス

code:promise.js

new Promise((resolve, reject) => reject(/* reason */))

Promise.all

引数:promise

返り値:promise

引数のpromiseでエラー発生

引数promiseでrejectされたエラーを返す

エラーなし

value にそれぞれのresolveの結果が入った配列のpromiseが返る

code:promiseAll.js

Promise.all(promises).then(allFulfilled, firstRejected)

Promise.race

引数: promise

返り値

promise

fullFilled　or rejected されたPromiseを返す

code:promiseRace.js

Promise.race(promises).then(firstFulfilled, firstRejected)

3つの状態

pending 未完了

settled(不変)

fulfuiled 正しく完了済み

reject エラー発生

渡された関数実行タイミング

すぐに実行されるのではなく、マイクロタスクのキューに入れられる

このキューは現在のイベントループの終わりに空になる

code:promise.js

/Promiseコンストラクタでpromiseインスタンス生成

const promise =new Promise()

これ読みましょう！(みんなオススメしてる！)

参考記事

神記事!